<template>
	<div class="status-predict">
		<container-item title="状态预测">
			<div class="flex justify-between">
				<el-radio-group
					v-model="activeStation"
					border
					text-color="#40e5f0"
					fill="#1c262d">
					<el-radio-button v-for="(item, index) in stationList" :key="index" :label="item.id">{{ item.stationName }}</el-radio-button>
				</el-radio-group>

				<el-radio-group
					v-model="activeType"
					border
					text-color="#40e5f0"
					fill="#1c262d">
					<el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.id">{{ item.stationName }}</el-radio-button>
				</el-radio-group>
			</div>
			<div>
				<huan-liu-fa></huan-liu-fa>
			</div>
			<div class="bot flex">
				<div class="left"></div>
        <suan-fa class="suan-fa"></suan-fa>
			</div>
		</container-item>
	</div>
</template>

<script>
import ContainerItem from "@/components/ContainerItem";
import HuanLiuFa from "./components/HuanLiuFa.vue";
import SuanFa from "./components/SuanFa.vue";

export default {
	name: "statusPredict",
	components: {
		ContainerItem,
		HuanLiuFa,
		SuanFa,
	},
	data() {
		return {
			activeStation: 1,
			stationList: [
				{id: 1, stationName: "中都换流站"},
				{id: 2, stationName: "阜康换流站"},
				{id: 3, stationName: "康巴诺尔换流站"}
			],
			activeType: 1,
			typeList: [
				{id: 1, stationName: "换流阀"},
				{id: 2, stationName: "阀内水冷"},
				{id: 3, stationName: "光CT"}
			]
		};
	},
	created() {

	},
	methods: {

	},
};
</script>
<style scoped lang="less">
::v-deep .el-radio-group {
	margin-bottom: 10px;
}
::v-deep .el-radio-button__inner {
	background: #101d29;
	border: 0;
	color: #ffffff;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
	border: 0;
}
.status-predict {
	height: 100%;
}
.bot {
	height: calc(100% - 180px);
	margin-top: 10px;
	.left {
		width: 180px;
	}
	.suan-fa {
		width: calc(100% - 180px);
	}
}
</style>
